<template>
	<view class="popup-container">
		<popup-layer ref="popupRef" direction="top" class="popup-content">
			<view class="popup-content-wrap">
				<view class="resume-form">
					<view class="resume-form-item">
						<text class="label">称谓</text>
						<input class="input-text" v-model="form.relationship" type="text" placeholder="请填写称谓">
					</view>
					<view class="resume-form-item">
						<text class="label">姓名</text>
						<input class="input-text" v-model="form.name" type="text" placeholder="请填写姓名">
					</view>
					<view class="resume-form-item">
						<text class="label">年龄</text>
						<input class="input-text" v-model="form.age" type="text" placeholder="请填写年龄">
					</view>
					<view class="resume-form-item">
						<text class="label">政治面貌</text>
						<input class="input-text" v-model="form.political" type="text" placeholder="请填写政治面貌">
					</view>
					<view class="resume-form-item">
						<text class="label">工作单位及职务</text>
						<input class="input-text" v-model="form.work" type="text" placeholder="请填写工作单位及职务">
					</view>
				</view>


				<view class="popup-footer">
					<button class="reset-btn" @tap="handleReset">重置</button>
					<button class="submit-btn" @tap="handleSearch">筛选</button>
				</view>
			</view>
		</popup-layer>
	</view>
</template>

<script>
	import popupLayer from '@/components/popupLayer/index.vue'
	export default {
		components: {
			popupLayer
		},
		data() {
			return {

			}
		},

	}
</script>

<style lang="scss" scoped>
	.popup-container {
		width: 100%;
		height: 600px;
		.popup-content {
			width: 100%;
			height: 600px;
			border-radius: 20px;
			padding: 50rpx 32rpx 40rpx 32rpx;
			box-sizing: border-box;
			overflow-y: auto;

			.popup-content-wrap {
				// position: fixed;
				height: 100%;
				overflow-y: auto;
				width: 100%;
				box-sizing: border-box;
			}

			.popup-item {
				margin-bottom: 28rpx;

				&.range {
					padding-bottom: 80px;
				}

				.popup-subtitle {
					display: block;
					margin-bottom: 24rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #34314F;
					line-height: 22px;
					text-align: left;
					font-style: normal
				}

				.labels {
					display: flex;
					flex-wrap: wrap;

					.popup-label {
						display: block;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #34314F;
						padding: 18rpx;
						border-radius: 16rpx;
						border: 1px solid rgba(52, 49, 79, 0.13);

						&.active {
							color: #FF7F1C;
							border: 1px solid #FF7F1C;
							background: rgba(255, 127, 28, 0.08);
						}
					}

					input {
						width: 200rpx;
						height: 76rpx;
						border-radius: 16rpx;
						text-align: center;
						border: 1px solid rgba(52, 49, 79, 0.13);
					}

					.sprate {
						font-size: 28rpx;
						color: #34314F;
						line-height: 76rpx;
						margin: 0 20rpx;
					}
				}

			}

			.popup-footer {
				position: fixed;
				bottom: 20rpx;
				left: 0;
				width: 100%;
				display: flex;
				padding-top: 30rpx;
				background-color: #fff;
				justify-content: space-around;
				z-index: 999;

				.reset-btn {
					margin-right: 32rpx;
					background-color: rgba(52, 49, 79, 0.06);
				}

				.submit-btn {
					background-color: rgba(255, 222, 109, 1);
				}

				button {
					width: 268rpx;
					height: 96rpx;
					border-radius: 40rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #34314F;
					line-height: 96rpx;
					text-align: center;

					&::after {
						border: 0;
					}
				}
			}
		}
	}
</style>